<template>
  <div class="product-container">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :loading="loading"
          :remote-method="remoteMethod"
          @change="searchTextChange"
          @keydown.enter.native="onSearchButtonClick"
          @blur="searchBlur"
          @clear="clear"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>

      <!-- 搜索按钮 -->
      <el-button
        icon="el-icon-search"
        type="primary"
        plain
        @click="onSearchButtonClick"
      ></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" v-has="'add'" @click="addStu"
        >添加项目</el-button
      >
    </div>
    <!-- 班级选择框 -->
    <div class="select_class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            placeholder="请选择"
            @change="classChange"
            @visible-change="classVisible"
          >
            <el-option label="全部" value="all" v-loading="selectLoading">
            </el-option>
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 导出Excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel">
        导出excel数据
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" style="width: 100%" border v-loading="loading">
        <el-table-column label="头像" width="80" align="center">
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column prop="degree" label="学历" align="center">
        </el-table-column>
        <el-table-column prop="class" label="班级" align="center">
        </el-table-column>
        <el-table-column prop="productUrl" label="项目" align="center">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="240">
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              v-has="'read'"
              @click="
                $router.push({
                  path: '/studentmanager/studentprofile',
                  query: { row }
                })
              "
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              v-has="'edit'"
              @click="editStu(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              class="btn"
              icon="el-icon-delete"
              v-has="'delete'"
              @click="delStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next"
        :total="stuTotal"
        :pageSize="stuPageSize"
        :current-page.sync="currentPage"
        @current-change="changePage"
      >
      </el-pagination>
    </div>

    <!-- dialog 弹出框 -->
    <Dialog></Dialog>
  </div>
</template>

<script>
import * as stuAPi from '@/api/student'
import { mapState, mapActions, mapMutations } from 'vuex'
import qee from 'qf-export-excel'
import Dialog from '@/components/Dialog/index.vue' // 前端导出excel的方法
export default {
  meta: {
    title: 'xyxmgl',
    icon: 'iconfont icon-shangpinguanli'
  },
  data() {
    return {
      selectLoading: true,
      searchValue: '', // 搜索的
      searchList: [],
      classes: '',
      classList: [],
      currentPage: 1 // 分页器当前分页
    }
  },
  computed: {
    ...mapState(['stuData', 'loading', 'stuTotal', 'stuPageSize'])
  },
  created() {
    // 获取学员数据列表
    this.GET_STULIST()
  },
  methods: {
    ...mapActions(['GET_STULIST']),
    ...mapMutations([
      'SET_STU_DATA',
      'SHOW_DIALOG',
      'CHANGE_DIALOG_TITLE',
      'SET_CURRENT_ROW'
    ]),
    // 增加学员
    addStu() {
      this.SHOW_DIALOG() // 显示dialog
      this.CHANGE_DIALOG_TITLE('增加学员信息') // 修改dialog标题
    },
    // 编辑学员信息
    editStu(row) {
      this.SHOW_DIALOG() // 显示dialog
      this.CHANGE_DIALOG_TITLE('编辑学员信息') // 修改dialog标题
      // console.log(row)
      // 将当前这行的数据回显到dialog弹出框中  通过vuex修改currentRow的值
      this.SET_CURRENT_ROW(row)
    },
    // 删除学员信息
    delStu(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除成功
          stuAPi.delStu(row.sId).then(res => {
            if (res.data.state) {
              // 更新列表
              this.GET_STULIST()
              this.$message.success('删除成功')
            } else {
              // 删除失败 这条数据已经被删除了
              this.$message.error('删除失败, 数据不存在')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          })
        })
    },
    // 选择班级
    classChange(query) {
      // console.log(query)
      // 1. select 展开的时候需要展示所有的班级列表
      // 2. 选中班级列表的时候, 要更新表格
      // 调用 GET_STULIST 获取学生列表 传递班级就可以了
      // 选择全部 将 query 设置为 '' 默认不传返回所有的内容
      if (query === 'all') query = ''
      this.GET_STULIST({ classes: query })
      // console.log(this.classes);
    },
    // 班级选择框展开/收起触发的事件 接收参数展开就是 true 收起就是false
    classVisible(isVisible) {
      // 展开选择器的时候打开加载动画
      this.selectLoading = true
      // 展开的时候需要获取数据
      // 调用获取列表的方法
      // console.log(isVisible)
      if (isVisible) {
        // 下拉框出现了
        // 发送请求获取班级列表
        stuAPi.getClassessList().then(res => {
          // console.log(res)
          this.classList = res.data.data
          // 请求得到数据的时候关闭加载动画
          this.selectLoading = false
        })
      }
    },
    // 分页器页码发生改变触发的函数
    changePage(page) {
      // 判断搜索框是否有值, 如果有就展示搜索的分页
      if (this.searchValue) {
        stuAPi.secrchStu(page, this.searchValue, null).then(res => {
          this.SET_STU_DATA(res.data)
        })
      } else {
        // 选择的分页
        // 页码变更 传给后台 重新获取数据
        // console.log(page)
        this.GET_STULIST({ page })
      }
      // if (this.classes) {
      //   this.GET_STULIST(page, 10, this.classes)
      // }
    },
    // 搜索框输入的值发生变化触发的函数
    remoteMethod(query) {
      // 表达输入的值赋值给绑定的值
      this.searchValue = query
      // 键盘弹起的时候获取输入值
      // console.log(query)
      // 向后台发起请求
      stuAPi.secrchStu(null, query, null).then(res => {
        // console.log(res)
        // 数据去重
        let norepeat = []
        for (let i = 0; i < res.data.data.length; i++) {
          let flag = true
          for (let k = 0; k < norepeat.length; k++) {
            if (res.data.data[i].name === norepeat[k].name) {
              flag = false
              break
            }
          }
          if (flag) norepeat.push(res.data.data[i])
        }
        // console.log(norepeat)
        this.searchList = norepeat
      })
    },
    // 搜索框选中值发生变化的事件
    searchTextChange(searchText) {
      // console.log(searchText)
      // 发送请求, 更新列表
      stuAPi.secrchStu(null, searchText, null).then(res => {
        // 选择的时候让分页显示第一页
        this.currentPage = 1
        // console.log(res)
        // 调用 mutations 中更改学员列表的方法
        this.SET_STU_DATA(res.data)
      })
    },
    // 点击按钮搜索
    onSearchButtonClick() {
      stuAPi.secrchStu(null, this.searchValue, null).then(res => {
        // console.log(res)
        // 调用 mutations 中更改学员列表的方法
        this.SET_STU_DATA(res.data)
      })
    },
    // 搜索框失去焦点 保持输入框的内容
    searchBlur() {
      this.searchValue = ''
    },
    // 点击清除按钮执行的逻辑
    clear() {
      // 清空输入框内容的时候, 表格应显示所有的内容
      // console.log(this.currentPage)
      // 清空搜索框初始分页器
      this.currentPage = 1
    },
    // 导出 excel 表格
    exportExcel() {
      // 定义表头
      let titleList = [
        {
          title: '头像地址',
          key: 'headimgurl'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '学历',
          key: 'degree'
        },
        {
          title: '班级',
          key: 'class'
        },
        {
          title: '项目',
          key: 'productUrl'
        },
        {
          title: '创建时间',
          key: 'cTime'
        }
      ]
      // 调用方法
      qee(titleList, this.stuData, '班级信息')
    }
  },
  components: { Dialog }
}
</script>

<style lang="less" scoped>
.product-container {
  .search {
    text-align: left;
    margin: 20px 0 30px 0;
    /deep/ .el-input {
      width: 300px;

      .el-input__inner {
        padding-right: 22px;
      }
    }
  }
  .exportExcel {
    text-align: right;
    margin-bottom: 10px;

    /deep/ .el-button {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      padding: 5px;
      font-size: 14px;
      border-radius: 4px;

      i {
        color: green;
        font-size: 20px;
        margin-right: 3px;
      }
    }
  }

  .btn {
    padding: 5px;
  }

  /deep/.el-form-item__content {
    text-align: left;
  }
}
</style>
